{extend name="base/common"}

{block name="style"}
<link href="/static/summernote/summernote.css" rel="stylesheet">
<link href="/static/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<link href="/static/js/jQuery-imgBox/imgbox.css" rel="stylesheet"/>
<style type="text/css">
    .note-editor.note-frame {
        border-radius: 0;
        border: 0;
        margin-bottom: 0;
    }

    .h-200{
        margin-left: 9%;

    }
    .front_cover_img {
        height: 40px;
        width: 40px;
        margin-top: 4px
    }

    .send_type_label {
        padding-left: 12px;
    }
    .activity_number_box{
        display: -webkit-flex;
        display: flex;
    }
    .activity_number_box>input{
        /*flex:1;*/
    }
    .activity_number_box>input.activity_number{
        width:100px;
        margin-right:5px;
    }
</style>
{/block}

{block name="page-header"}

{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="mail-box-header">
            <div class="pull-right tooltip-demo">
                <!--<button url="{:Url('draft')}" class="btn btn-white btn-sm ajax-post" data-toggle="tooltip" data-placement="top"-->
                <!--target-form="form-horizontal" data-edit="content">-->
                <!--<i class="fa fa-pencil"></i> 保存草稿-->
                <!--</button>-->
                <a href="javascript:goBack()" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"><i
                        class="fa fa-times"></i> 关闭</a>
            </div>
            <h2>
                活动添加
            </h2>
        </div>
        <div class="mail-box">
            <!--<form class="form-horizontal" method="post">-->
                <div class="mail-body">
                    <div class="col-sm-12">
                        <div class="col-sm-6">
                            <label class="col-sm-12 control-label">活动名称:</label>
                            <div class="col-sm-12"><input type="text" class="form-control activity_name" placeholder="活动的名称" name="name" maxlength="19"     value="{$info.name}"></div>
                        </div>
                        <div class="col-sm-6">
                            <label class="col-sm-12 control-label">活动人数:</label>
                            <div class="col-sm-12 activity_number_box">
                                <input type="number" class="form-control activity_number" placeholder="若不限则不用填" name="activity_number" value='{$info.activity_number}'>
                                <input type="text" class="form-control activity_number_remark" placeholder="选填，如：20人成团" value='{$info.remark}'>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label class="col-sm-12 control-label">集合地点:</label>
                            <div class="col-sm-12"><input type="text" class="form-control meeting_place" placeholder="集合地点" name="meeting_place" value='{$info.meeting_place}'></div>
                        </div>
                        <div class="col-sm-6">
                    <!-- <div class="form-group"><label class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-10"><select class="form-control m-b" name="status">
                            <option value="1" {eq name="$info.status" value="1"}selected {/eq} >预报名</option>
                            <option value="2" {eq name="$info.status" value="2"}selected {/eq}>开始报名</option>
                        </select></div>
                    </div>-->
                            <label class="col-sm-12 control-label">目的地点:</label>
                            <div class="col-sm-12"><input type="text" class="form-control destination_place" placeholder="目的地点" name="destination_place" value='{$info.destination_place}'></div>
                        </div>
                        <div class="col-sm-6">
                            <label class="col-sm-12 control-label">开始时间:</label>
                            <div class="col-sm-12"><input type="date" class="form-control activity_time" placeholder="活动开始时间" name="start_time" min="{$time}" value='{$info.start_time}'></div>
                        </div>

                        <div class="col-sm-6">
                            <label class="col-sm-12 control-label">结束时间:</label>
                            <div class="col-sm-12"><input type="date" class="form-control activity_time2" placeholder="活动结束时间" name="end_time" min="{$time}" value="{if condition='$info.end_time==null'}{else/}{$info.end_time|date='Y-m-d',###}{/if}"></div>
                        </div>

                        <div class="col-sm-6">
                            <label class="col-sm-12 control-label">分享标题:</label>
                            <div class="col-sm-12"><input type="text" class="form-control share_title" placeholder="分享标题" name="share_title" value='{$info.share_title}'></div>
                        </div>


                    </div>
                    <div style="padding: 10px;">
                        <div class="col-sm-12" style="padding: 10px;">
                            <b>活动类型:</b><button class='btn btn-primary'style="margin-left: 10px" onclick="addType()">新增</button>
                        </div>
                        <table id="type-box" class="table table-hover table-mail" style="margin: 0 auto;width: 90%;border: 1px solid #f1f1f1">
                            <thead>
                                <th>类型名称</th>
                                <th>类型人数</th>
                                <th>类型价格</th>
                                <th>操作</th>
                            </thead>

                            <tbody>
                                {volist name='$info->type' id='item'}
                                <tr>
                                    <td><input type="text" class="type_name" placeholder="名称" value="{$item->name}"></td>
                                    <td><input type="number" class="type_num" placeholder="人数" value="{$item->number}"></td>
                                    <td><input type="number" class="type_price" placeholder="价格" value="{$item->price}"></td>
                                    <td>
                                        {neq name='$info->status' value='2'}
                                        <button class="btn btn-primary" disabled title="活动已开始，禁止删除已有类型">删除</button>
                                        {else/}
                                        <button class="btn btn-primary" onclick="removeType(this)">删除</button>
                                        {/neq}
                                    </td>
                                </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </div>
                    <div class="col-sm-12"  style="padding: 10px;">
                        <label class="col-sm-1 control-label">封面图片:</label>
                        <div class="col-sm-3">
                            <input id="input-file" type="file" class="file">
                            <img name="front_cover" id="front_cover" style="max-height: 200px; max-width: 200px" src="{$info.front_cover}"  />
                        </div>
                    </div>

                    <div class="col-sm-12 ">
                        <label class="col-sm-1 control-label">活动介绍:</label>
                        <br>
                        <br>
                        <div class="mail-text h-200" style="border: 2px #888888 solid;" class="col-sm-10 ">
                            <div class="summernote col-sm-7">{$info.activity_description}</div>
                            <div class="clearfix"></div>
                        </div>
                    </div>

                    <div class="col-sm-12 fuwenben2">
                        <label class="col-sm-1 control-label">报名须知:</label>
                        <br>
                        <br>
                        <div class="mail-text h-200" style="border: 2px #888888 solid;" class="col-sm-10 ">
                            <div class="summernote col-sm-7">{$info.registration_required}</div>
                            <div class="clearfix"></div>
                        </div>
                    </div>


                    <div class="mail-body text-right tooltip-demo">
                        <button class="btn btn-primary addval" onclick="goPost()">保存</button>
                        <a class="btn btn-default" href="javascript:window.history.go(-1);">返回</a>
                    </div>
                    <input type="hidden" name="registration_required" class="registration_required" >
                    <input type="hidden" name="activity_description" class="activity_description" >
                    <input type="hidden" name="id" class="activity_id" value="{$info.id}">
                    <input type="hidden" class="front_cover" name="front_cover" value="{$info.front_cover}">
                    <div class="clearfix"></div>
                </div>
            <!--</form>-->
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/static/summernote/summernote.min.js"></script>
<script src="/static/summernote/lang/summernote-zh-CN.js"></script>
<script src="/static/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="/static/bootstrap-fileinput/themes/fa/fa.js"></script>
<script src="/static/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="/static/js/jQuery-imgBox/jquery.imgbox.js"></script>
<script>
    function addType() {
        var table= $('#type-box'),
                tbody=table.find('tbody'),
                tr =
                        '<tr>'+
                            '<td><input type="text" placeholder="名称" class="type_name" value=""></td>'+
                            '<td><input type="number" placeholder="人数" class="type_num" value="">'+
                            '<td><input type="number" placeholder="金额" class="type_price" value=""></td>'+
                            '<td>'+
                                '<button class="btn btn-primary" onclick="removeType(this)">删除</button>'+
                            '</td>'+
                        '</tr>';

        tbody.append(tr);
    }
    function removeType(the) {
        console.log($(the).parent().parent())
        var the=$(the),
                tr=$(the).parent().parent();
        tr.remove();
    }
    function getVal(obj) {
        return $(obj).val();
    }
    function goPost() {
        var data={
            id:getVal('.activity_id'),
            name:getVal('.activity_name'),
            start_time:getVal('.activity_time'),
            end_time:getVal('.activity_time2'),
            activity_number:getVal('.activity_number'),
            remark:getVal('.activity_number_remark'),
            meeting_place:getVal('.meeting_place'),
            share_title:getVal('.share_title'),
            destination_place:getVal('.destination_place'),
            front_cover:getVal('.front_cover'),
            activity_description:$('.panel-body').eq(0).html(),
            registration_required:$('.panel-body').eq(1).html(),
        };
        if(!data.name){
            updateAlert('请填写活动名称！', 'warning');
            return;
        }else if(!data.meeting_place){
            updateAlert('请填写集合地点！', 'warning');
            return;
        }else if(!data.destination_place){
            updateAlert('请填写目的地！', 'warning');
            return;
        }else if(!data.start_time){
            updateAlert('请选择活动时间！', 'warning');
            return;
        }else if(!data.front_cover){
            updateAlert('请添加封面图', 'warning');
            return;
        }else if(!data.activity_description){
            updateAlert('请填写活动介绍！', 'warning');
            return;
        }else{
            var tr=$('#type-box>tbody>tr'),
                    type = [],
                    allNum=0;
            console.log(tr)
            if(tr.length===0){
                updateAlert('请添加活动类型', 'warning');
                return ;
            }
            for(var i=0;i<tr.length;i++){
                var tri = tr.eq(i);
                type[i]={
                    typeid : i+1,
                    name:tri.find('.type_name').val(),
                    number : tri.find('.type_num').val(),
                    price:tri.find('.type_price').val(),
                };
                if(type[i].name===''||type[i].number===''||type[i].price===''){
                    updateAlert('请填写完整活动类型信息', 'warning');
                    return
                }else if(data.activity_number){
//                    计算各类型人数是否超标
                    allNum += parseInt(type[i].number);
                    if(allNum > data.activity_number){
                        updateAlert('各类型总人数已大于活动总人数，请合理安排人数', 'warning');
                        return
                    }
                }
            }
            data.type=type;
        }
        $.ajax({
            url:'/admin/activity/add',
            type:'post',
            data:data,
            success:function (res) {
                if(res.code===1){
                    updateAlert(res.msg+'提交成功！', 'success');
                    setTimeout(function () {
                        goBack();
                    },1000)
                }else{
                    updateAlert(res.msg+'提交失败，请重试！', 'error');
                }
                console.log(res)
            },
            error:function (res) {
                updateAlert(res.msg+'请求失败，请重试！', 'error');
            }
        })
    }
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN',
            height: 300,
            minHeight: 210,
            callbacks: {
                onImageUpload: function (files) { //the onImageUpload API
                    img = sendFile(files[0]);
                }
            }
        });
        function sendFile(file) {
            var data = new FormData();
            data.append("file_data", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "{:Url('Upload/picture')}",
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    var data = $.parseJSON(response);
                    $(".summernote").summernote('insertImage', data.data, 'image name'); // the insertImage API

                }
            });
        }
        $('.send_type').on('ifChecked', function (event) {
            switch ($(this).val()) {
                case '0' :
                    $("#send_target").empty();
                    $("#send_target").append("<option value='0'>所有人</option>");
                    break;
                case '1':
                    $.ajax({
                        type: "get",
                        url: "{:Url('getDepartment')}",
                        success: function (response) {
                            $("#send_target").empty();
                            $.each(response.department, function (i, item) {
                                $("#send_target").append("<option value='" + item.id + "'>" + item.name + "</option>");
                            });
                        }
                    });
                    break;
                case '2':
                    $.ajax({
                        type: "get",
                        url: "{:Url('getTag')}",
                        success: function (response) {
                            $("#send_target").empty();
                            $.each(response.taglist, function (i, item) {
                                $("#send_target").append("<option value='" + item.tagid + "'>" + item.tagname + "</option>");
                            });
                        }
                    });
                    break;
            }
        });
    });

    $("#input-file").fileinput({
        showPreview: false,
        language: 'zh', //设置语言
        uploadUrl: '{:Url("Upload/picture")}', //上传的地址
        allowedFileExtensions: ['png', 'jpg', 'gif', 'png', 'jpeg'],
        maxFileSize: 1024 * 200,
    }).on("filebatchselected", function (event, files) {
        $(this).fileinput("upload");
    }).on('fileuploaded', function (event, data, previewId, index) {
        var response = $.parseJSON(data.response);
        if (response.code == 1) {
            $("input[name='front_cover']").val(response.data);
            var pic = document.getElementById("front_cover");
            pic.src = response.data;
            updateAlert(response.msg, 'success');
        } else {
            updateAlert(response.msg, 'warning');
        }
    });

    $(".front_cover").imgbox({
        overlayShow: false,
        hideOnContentClick: true,
        slideshow: false,
        theme: 'dark',
        alignment: 'center',       // Position - may be auto OR center.
        allowMultiple: false,
    });
    //把content内容赋给隐藏表单

    //    $('.btn-primary').click(function () {
    //        $('.registration_required').val();
    //        $('.activity_description').val( );
    //
    //    })

    function goBack() {
        window.history.go(-1);
    }
    $(".addval").on('click', function () {
//        console.log($('.panel-body').eq(0).html());
            /*$('.activity_description').attr('value',$('.panel-body').eq(0).text());
            $('.registration_required').attr('value',$('.panel-body').eq(1).text());*/
            $('.activity_description').val($('.panel-body').eq(0).html());
            $('.registration_required').val($('.panel-body').eq(1).html());


    }
    )
    highlight_subnav("{:Url('Activity/index')}");
</script>
{/block}